<template>
  <j-modal
    class='main-body'
    title='新闻'
    :width='width'
    placement='right'
    :visible='visible'
    :footer="null"
    @cancel='close'>
    <div class='detail-body'>
      <div class='detail-title'>{{ data.mainTitle }}</div>
      <div class='detail-subhead'>
        <div>{{ data.createTime }}</div>
        <div class='mtl'>{{ data.viceTitle }}</div>
      </div>
      <div v-html='data.content'></div>
    </div>
  </j-modal>
</template>

<script>

  export default {
    name: 'MipCommonNewsDetail',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
    },
    data () {
      return {
        width: 'calc(90vw - 200px)',
        data: {
          mainTitle: null,
          createTime: null,
          viceTitle: null,
          content: null
        }
      }
    },
    methods: {
      show(data) {
        this.data = data;
      },
      close() {
        this.$emit('close');
      }
    }
  }
</script>
<style scoped>

.main-body {
  height: calc(80vh - 100px);
}

.detail-body {
  display: flex;
  flex-direction: column;
  padding: 0 150px 0 150px;
}

.detail-title {
  text-align: center;
  font-family: "Microsoft JhengHei",'微软雅黑',"Microsoft YaHei",sans-serif;
  font-weight: 900;
  font-size: 1.8em;
}

.detail-subhead {
  display: flex;
  justify-content: center;
  margin: 10px 0 20px;
  font-family: "Microsoft JhengHei",'微软雅黑',"Microsoft YaHei",sans-serif;
  font-size: 0.9em;
  color: #999999;
}

.mtl {
  margin-left: 5px;
}

</style>
